<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增加小程序信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>

    </style>
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :model="form" ref="contract" :rules="rules" inline-message="true" style="width: 100%;">
            <div style="display: flex; height: 85vh; padding-bottom: 100px; ">
                <div style="width: 100%; margin-right: 20px;">
                    <div class="table_titel">
                        <div class="titel">小程序配置</div>
                    </div>
                    <el-form-item label="样式名称:">
                        <el-input style="width: 30%;" v-model.trim="StyleName" placeholder="小程序样式名称" />
                    </el-form-item>
                    <el-tabs type="border-card" v-model="activeName">
                        <el-tab-pane label="商城首页" style=" margin: 0 0 100px 0;" name="index">
                            <div class="table_titel">
                                <div class="titel">总背景</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Content.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="logo展示">
                                    <el-form-item prop="backgroundColor">
                                        <el-switch v-model="form.index.Content.Logo" active-color="#13ce66"
                                            inactive-color="#ff4949">
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="背景图片">
                                    <el-form-item prop="backgroundColor">
                                        <div style="display: flex;">
                                            <div style="flex-shrink: 0; margin-right: 10px;">
                                                <div class="preview" v-show="form.index.Content.pic">
                                                    <el-image class="el-upload-list__item-thumbnail"
                                                        style="width: 148px; height: 148px"
                                                        :src="form.index.Content.pic" fit="contain"></el-image>
                                                    <span class="el-upload-list__item-actions">
                                                        <span
                                                            @click="handlePictureCardPreview(form.index.Content.pic)"><i
                                                                class="el-icon-zoom-in"></i></span>
                                                        <span @click="handleRemove()"><i
                                                                class="el-icon-delete"></i></span>
                                                    </span>
                                                </div>
                                                <el-upload v-show="!form.index.Content.pic" class="upload-demo"
                                                    :show-file-list="false" list-type="picture-card" action=""
                                                    accept="image/*" :before-upload="uploadImage">
                                                    <i slot="default" class="el-icon-plus"></i>
                                                </el-upload>
                                            </div>
                                            <div style="width: 100%;">
                                                <el-form-item label="尺寸:">
                                                    <el-select placeholder="请选择" filterable
                                                        v-model.trim="form.index.Content.backgroundSize"
                                                        style="width: 50%;">
                                                        <el-option v-for="(item,index) in Size" :key="index"
                                                            :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="平铺:">
                                                    <el-select placeholder="请选择" filterable
                                                        v-model.trim="form.index.Content.backgroundRepeat"
                                                        style="width: 50%;">
                                                        <el-option v-for="(item,index) in Repeat" :key="index"
                                                            :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">顶部导航栏</div>
                            </div>
                            <el-descriptions :column="1" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.TopTabs.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">类目样式</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Icon.textColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Icon.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="边框颜色">
                                    <el-form-item prop="IconBackgroundColor">
                                        <el-color-picker v-model="form.index.Icon.IconBackgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">导航栏样式</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker show-alpha v-model="form.index.Tabs.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="textColor">
                                        <el-color-picker v-model="form.index.Tabs.textColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="选中字体颜色">
                                    <el-form-item prop="selectColor">
                                        <el-color-picker v-model="form.index.Tabs.selectColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">商品卡片</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Detail.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker v-model="form.index.Detail.themeColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                        <el-tab-pane label="活动首页" style=" margin: 0 0 100px 0;" name="activity">
                            <div class="table_titel">
                                <div class="titel">活动背景图</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker
                                            v-model="form.activity.Content.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="背景图片">
                                    <el-form-item prop="backgroundColor">
                                        <div style="display: flex;">
                                            <div style="flex-shrink: 0; margin-right: 10px;">
                                                <div class="preview" v-show="form.activity.Content.pic">
                                                    <el-image class="el-upload-list__item-thumbnail"
                                                        style="width: 148px; height: 148px"
                                                        :src="form.activity.Content.pic" fit="contain"></el-image>
                                                    <span class="el-upload-list__item-actions">
                                                        <span
                                                            @click="handlePictureCardPreview(form.activity.Content.pic)"><i
                                                                class="el-icon-zoom-in"></i></span>
                                                        <span @click="handleRemove()"><i
                                                                class="el-icon-delete"></i></span>
                                                    </span>
                                                </div>
                                                <el-upload v-show="!form.activity.Content.pic" class="upload-demo"
                                                    :show-file-list="false" list-type="picture-card" action=""
                                                    accept="image/*" :before-upload="uploadImage">
                                                    <i slot="default" class="el-icon-plus"></i>
                                                </el-upload>
                                            </div>
                                            <div style="width: 100%;">
                                                <el-form-item label="尺寸:">
                                                    <el-select placeholder="请选择" filterable
                                                        v-model.trim="form.activity.Content.backgroundSize"
                                                        style="width: 50%;">
                                                        <el-option v-for="(item,index) in Size" :key="index"
                                                            :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="平铺:">
                                                    <el-select placeholder="请选择" filterable
                                                        v-model.trim="form.activity.Content.backgroundRepeat"
                                                        style="width: 50%;">
                                                        <el-option v-for="(item,index) in Repeat" :key="index"
                                                            :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">活动主标题颜色</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.activity.title.color"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">活动副标题颜色</div>
                            </div>
                            <el-descriptions :column="3" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.activity.subtitle.color"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">滑动区域背景颜色</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker
                                            v-model="form.activity.recommend.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">商品卡片</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker
                                            v-model="form.activity.scroll_view_item_H.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="商品名字字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker
                                            v-model="form.activity.scroll_view_item_H.color"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <div class="table_titel">
                                <div class="titel">商品卡片标题颜色</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker v-model="form.activity.Heading.color"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                            <!-- <div class="table_titel">
                                <div class="titel">商品卡片标题背景图</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="背景颜色">
                                    <el-form-item prop="backgroundColor">
                                        <el-color-picker v-model="form.index.Detail.backgroundColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker v-model="form.index.Detail.themeColor"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions> -->
                            <div class="table_titel">
                                <div class="titel">降价颜色</div>
                            </div>
                            <el-descriptions :column="2" border size="small">
                                <el-descriptions-item label="字体颜色">
                                    <el-form-item prop="themeColor">
                                        <el-color-picker v-model="form.activity.markdown.color"></el-color-picker>
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="display: flex; flex-direction: column; flex-shrink: 0;">
                    <div class="table_titel" style="flex-shrink: 0;">
                        <div class="titel">小程序预览</div>
                    </div>
                    <div style="background-color: aquamarine; width: 375px;height: 667px;">

                    </div>
                </div>
            </div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="./js/Add.js"></script>
</body>

</html>